<template>
  <div>
    <a-modal v-model:visible="visible">
      <template #title> 供应月份详情 </template>
        <a-table
        :columns="columns"
        :data="monthDataList"
        size="large"
        :bordered="{ wrapper: true, cell: true }"
      >
      <!-- 品名 -->
        <template #total_num="{ record }">
          <span>{{ record.total_num }}{{unit}}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { getMonthData } from '@/api/manage';
import { ref } from 'vue'
const visible = ref(false)
const monthDataList = ref([])
const unit = ref('')
const openDialog = (record) => {  
  console.log(record);
  unit.value = record.unit
  let params = {
    product_name_id:record.manage_product_id
  }
  getMonthInfo(params)
  visible.value = true
}
const getMonthInfo = async (params) => {
  console.log(params);
  
  const { code, data } = await getMonthData(params);
  if(code === 200) {
    monthDataList.value = data
  }
}
const columns = ref([
  {
    title: '月份',
    dataIndex: 'month',
    align: 'center'
  },
  {
    title: '供应量',
    dataIndex: 'total_num',
    slotName:'total_num',
    align: 'center'
  },
])
defineExpose({
  openDialog
})
</script>

<style lang="less" scoped></style>